<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
</style>
<body>
    <canvas id="canvas"></canvas>
    <image id='img' style='visibility: hidden;' src="./饲料.png"></image>
</body>
</html>

<script>
    const CANVAS_HEIGHT = window.screen.height
    const CANVAS_WIDTH = window.screen.width
    let radius = 100
    let angle = 0
    let initX = 0
    let initY = 0
    let vx = 200
    let vy = 300
    let imgList = []
    window.onload = () => {
        let canvas = document.getElementById('canvas')
        let context = canvas.getContext('2d')
        canvas.width = CANVAS_WIDTH
        canvas.height = CANVAS_HEIGHT
        // context.fillStyle = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`
        // context.shadowBlur= 20;
        // context.shadowColor = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`
        
        
        // drawFont('hello world', context)
        // context.transform(1, -Math.sign(Math.PI * 45 / 180), Math.sign(Math.PI * 45 / 180), 1, 100, 100);
    //    context.lineWidth=5;
    //    context.beginPath()
    //    context.moveTo(400, 400)
    //    context.quadraticCurveTo(150,250, 100, 100);
    //    context.stroke()
    context.globalCompositeOperation='source-atop';
    setInterval(() => {
        // context.globalCompositeOperation='lighter';
        context.clearRect(0,0, CANVAS_WIDTH, CANVAS_HEIGHT )
        context.beginPath()
        
        context.fillRect(0, 0, 200, 200);
        let imgObj = function (vy) {
            this.vy = vy || 0
            this.image = document.getElementById('img')
            context.drawImage(this.image, 0,0, 463, 430, 0, this.vy, 200, 200)
        }
        // for(let i = 0; i < 7; i++) {
            
        //     imgList[0] = new imgObj()
        // }
        // this.update()
    }, 40)
     function update () {
        for (let i = 0; i< imgList.length; i++) {
            imgList[i].vy --
        }
    }
    // setInterval(() => {
    //     context.clearRect(0,0, CANVAS_WIDTH, CANVAS_HEIGHT )
    //     // context.beginPath()
    //     // context.fillRect(0, 0, 200, 200);
    //     // context.globalCompositeOperation='source-atop';
    //     for (let i = 0; i< imgList.length; i++) {
    //         imgList[i].vy --
    //         context.drawImage(imgList[i].image, 0,0, 463, 430, 0, imgList[i].vy, 200, 200)
    //     }
    // }, 2000)
    // let image = new Image()
    // image.src = './饲料.png'
    // image.onload = () => {
    //     // setInterval(() => {
    //         context.beginPath()
    //         context.fillRect(0, 0, 200, 200);
    //         context.globalCompositeOperation='source-atop';
    //         drawImg(context, image)
    //         // context.drawImage(image, 0,0, 463, 430, 0,initY, 200, 200)
    //         // context.drawImage(image, 0,0, 463, 430, 0,200, 200, 200)
            
    //     // }, 10)
        
    // }

    //     // context.translate(20, 20);

    // }
    // function drawImg (ctx, image) {
    //     for (let i = 0; i< 7; i++) {
    //         let imgItem = ctx.drawImage()
    //     }
    // }
    // function update (ctx) {
    //     ctx.fillStyle = `rgba(255, 255, 255, 0.1)`
    //     ctx.fillRect(0,0,CANVAS_WIDTH, CANVAS_HEIGHT )
    //     // ctx.clearRect(0,0, CANVAS_WIDTH, CANVAS_HEIGHT )
    //     if (angle <= -180) {
    //         angle *= -1
    //         angle += 1
    //     } else {
    //         angle -= 1
    //     }
    //     vx = Math.cos(angle * (Math.PI / 180)) * radius + initX
    //     vy =  Math.sin(angle * (Math.PI / 180)) * radius + initY
    }
</script>